<template>
  <div class="router-nav">
    <div :class="activeClass"></div>
    <div>
      <Button
        v-for="(btn, i) in $store.state.routerMenus"
        :key="'routerBtn' + i"
        @click="to(i)"
      >
        {{ btn.name }}
        <Icon
          type="ios-close"
          v-if="btn.close"
          @click.stop="closeBtn(i)"
          size="20"
        />
      </Button>
    </div>
  </div>
</template>

<script>
export default {
  setup() {},
  name: "RouterBar",
  computed: {
    activeClass() {
      // 通过状态管理的索引判断当前导航栏的宽度
      let routerIndex = this.$store.state.routerIndex;
      if (routerIndex == 0) {
        return "none-menu";
      } else {
        return "full-menu";
      }
    },
  },
  methods: {
    to(i) {
      this.$store.commit("routerMenuItemGo", i);
    },
    closeBtn(i) {
      this.$store.commit("deleteRouterMenuItem", i);
    },
  },
};
</script>

<style scoped>
.router-nav {
  position: fixed;
  top: 48px;
  width: 100%;
  min-height: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0 10px;
  z-index: 99;
  background-color: #f5f7f9;
}
/* 注意:使用calc计算宽度时 - 号前后要加空格 否则样式不生效 */
.none-menu {
  width:10px;
}
.full-menu {
  width: 250px;
}
.router-nav div > button {
  margin-right: 15px;
}
</style>